import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Form, Icon, Input, Button, Checkbox, Spin } from 'antd';
import QueueAnim from 'rc-queue-anim';
import Texty from 'rc-texty';
import { useBoolean } from 'ahooks';
import ChangePassword from '@/pages/User/components/ChangePassword';
import { jsEncodePwd, getTerminalType } from '@/utils/utils';
import 'rc-texty/assets/index.css';
import styles from './less/login.less';
import styles2 from './less/meteor.less';

const FormItem = Form.Item;

const dataSource = {
  wrapper: { className: 'banner3' },
  textWrapper: {
    className: 'banner3-text-wrapper',
    children: [
      {
        name: 'slogan',
        className: 'banner3-slogan',
        children: 'Tangram',
        texty: true,
      },
    ],
  },
};

function LoginPage({
  dispatch,
  needVerifyCode,
  needModifyPsw,
  verifyCode,
  forceLogin,
  submitting,
  initLoading,
  form: { getFieldDecorator, validateFields, getFieldValue },
}) {
  // const [verifyCode, setVerifyCode] = useState(null);
  const [userCode, setUserCode] = useState();
  const [visible, { setTrue: show, setFalse: hide }] = useBoolean(false);

  const slogon = dataSource.textWrapper.children.map(item => {
    const { name, texty, ...$item } = item;

    return (
      <div key={name} {...$item}>
        {texty ? <Texty type="mask-bottom">{item.children}</Texty> : item.children}
      </div>
    );
  });

  const handleSubmit = e => {
    e.preventDefault();
    validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'login/login',
          payload: values,
        });
      }
    });
  };

  function getVerifyCode() {
    dispatch({
      type: 'login/addVerifyCode',
    });
  }

  function clearVerifyCode() {
    dispatch({
      type: 'login/clearVerifyCode',
    });
  }

  function handleClose() {
    dispatch({
      type: 'login/update',
      payload: {
        needModifyPsw: false,
      },
    });
    hide();
  }
  useEffect(() => {
    // dispatch({
    //   type: 'login/getInitData',
    // });
  }, [dispatch]);

  useEffect(() => {
    if (needVerifyCode) {
      getVerifyCode();
    } else {
      clearVerifyCode();
    }
  }, [needVerifyCode]);

  useEffect(() => {
    if (needModifyPsw) {
      show();
      setUserCode(getFieldValue('userCode'));
    } else {
      hide();
    }
  }, [getFieldValue, hide, needModifyPsw, show]);

  return (
    <div {...dataSource.wrapper}>
      <div className={`${styles2.meteor} ${styles2.meteor1} ${styles2.meteorFla}`} />
      <div className={`${styles2.meteor} ${styles2.meteor2} ${styles2.meteorFla2}`} />
      <div className={`${styles2.meteor} ${styles2.meteor3} ${styles2.meteorFla3}`} />
      <div className={`${styles2.meteor} ${styles2.meteor4} ${styles2.meteorFla4}`} />
      <QueueAnim key="QueueAnim" type={['bottom', 'top']} delay={200} {...dataSource.textWrapper}>
        {slogon}
        <div className={styles.form}>
          <div className={styles.panel}>
            <div className={styles.panelHead}>
              <div className={styles.panelTit}>登录</div>
              <div className={styles.panelSubtit}>使用工号或手机号登录</div>
            </div>
            <div className={styles.panelBody}>
              {/* <Spin spinning={initLoading} delay={300}> */}
              <Form onSubmit={handleSubmit} className="login-box" autoComplete="off">
                <FormItem style={{ marginBottom: 16 }}>
                  {getFieldDecorator('username', {
                    rules: [
                      {
                        required: true,
                        // type: 'string',
                        // len: 8,
                        message: '请输入工号或手机号码',
                      },
                    ],
                  })(
                    <Input
                      prefix={
                        <Icon
                          type="user"
                          style={{
                            color: 'rgba(0,0,0,.25)',
                          }}
                        />
                      }
                      placeholder="工号或手机号码"
                    />
                  )}
                </FormItem>
                <FormItem style={{ marginBottom: 16 }}>
                  {getFieldDecorator('password', {
                    rules: [
                      {
                        required: true,
                        // min: 8,
                        message: '输入的密码有误',
                      },
                    ],
                  })(
                    <Input
                      prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      type="password"
                      placeholder="密码"
                    />
                  )}
                </FormItem>
                {/* <FormItem>
                    <a
                      href="#"
                      className="pull-right"
                      onClick={e => {
                        e.preventDefault();
                      }}
                    >
                      忘记密码
                    </a>
                    <Checkbox>自动登录</Checkbox>
                  </FormItem> */}
                <FormItem className="padding-top">
                  <Button type="primary" block size="large" htmlType="submit" loading={submitting}>
                    登录
                  </Button>
                </FormItem>
              </Form>
              {/* </Spin> */}
            </div>
          </div>
        </div>
        <ChangePassword
          visible={visible}
          close={handleClose}
          userCode={userCode}
          onSuccess={handleClose}
        />
      </QueueAnim>
    </div>
  );
}

export default connect(({ login, loading }) => ({
  forceLogin: login.forceLogin,
  needModifyPsw: login.needModifyPsw,
  needVerifyCode: login.needVerifyCode,
  verifyCode: login.verifyCode,
  initLoading: loading.effects['login/getInitData'],
  submitting: loading.effects['login/login'],
}))(Form.create()(LoginPage));
